<template>
	<div class="curconfirmBox">
		<div  ref="curconfirm" :style="{width:width,height:height}"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
export default{
	data(){
		return {
			width:'100%',
			height:'350px',
			currentPage:1,//但其概念456
			totalPage:0,//总共多少页
			timer:null
		}
	},
	computed:{
		data(){
			return this.$store.state.died
		}
	},
	watch:{
		data(newData){
			this.totalPage = Math.ceil(newData.length/5);
			this.updateChart();
			this.setIntervald();
		}
	},
	methods:{
		initChart(){
			this.myChart = echarts.init(this.$refs.curconfirm,'westeros');
			this.myChart.on('mouseover',()=>{
				clearInterval(this.timer)
			})
			this.myChart.on('mouseout',()=>{
				this.setIntervald()
			})
			let initOption={
				title:{
					text:'▋ 全国省份死亡病例',
					textStyle:{
						color:'#fff'
					},
					left:20,
					top:20
				},
				xAxis:{
					type:'value'
				},
				yAxis:{
					type:'category'
				},
				series:[
					{
						type:'bar',
						barWidth:55,
						label:{
							show:true,
							position:'right',
						},
						itemStyle:{
							borderRadius:[0,33,33,0],
							color: echarts.graphic.LinearGradient(0,1,1,1,[
								{
									offset:0,
									color:'#8360c3'
								},
								{
									offset:1,
									color:'#2ebf91'
								}
							])
						}
					}
				],
				// 坐标轴
				grid:{
					bottom:'5%',
					top:'20%',
				},
				tooltip:{
					trigger:'axis',
					axisPointer:{
						type:'line',
						lineStyle:{
							type:'solid',
							color:'#2d3443'
						},
						z:-10
					}
				}
			}
			this.myChart.setOption(initOption);
		},
		updateChart(){
			const start = (this.currentPage -1) *5;
			const end = this.currentPage * 5;
			let _new= this.data.slice(start,end).reverse();
			let _xName = _new.map((item)=>{
				return item.name
			})
			let _data = _new.map((item)=>{
				return item.value
			});
			this.myChart.setOption({
				yAxis:{
					data: _xName
				},
				series:[
					{
						type:'bar',
						data: _data
					}
				]
			});
		},
		setIntervald(){
			if(this.timer){
				clearInterval(this.timer)
			}
			this.timer = setInterval(()=>{
				this.currentPage++;
				if(this.currentPage > this.totalPage){
					this.currentPage = 1
				}
				this.updateChart();
			},3000)
		},
		screenAdapter(){
			const offsetWidth = this.$refs.curconfirm.offsetWidth /100*3.6;
			const adapterOption = {
				
				tooltip:{
					axisPointer:{
						lineStyle:{
							width:offsetWidth
						}
					}
				},
				series:[
					{
						barWidth:offsetWidth,
						itemStyle:{
							barBorderRadius:[0,offsetWidth/2,offsetWidth/2,0]
						}
					}
				]
			};
			this.myChart.setOption(adapterOption);
			this.myChart.resize({
				animation:{
					duration:300
				}
			})
		}
	},
	mounted() {
		this.initChart();
		this.screenAdapter();
		window.addEventListener('resize',this.screenAdapter)
	},
	beforeDestroy() {
		clearInterval(this.timer);
		window.removeEventListener('resize',this.screenAdapter);
	}
}
</script>

<style lang="less">
	.curconfirmBox{
		width: 100%;
	}
	canvas{
		border-radius: 15px;
		background-color: rgba(0,0,0,.5);
	}
</style>
